<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: slateblue;
        }
        .left{
            float: left;
            width: 20%;
            height: 15%;
            background-color:yellowgreen;
        }
        .right{
            float: right;
            width: 30%;
            height: 20%;
            background-color: tomato;
        }
    </style>
</head>
<body>
    

    <div id="app">
        <box>
            <template #me>
                <p>我是left儿子</p>
            </template>
            <template v-slot:brother>
                <small><h3>我是right兄弟</h3></small>
            </template>
        </box>
    </div>

    <template id="box">
        
        <div class="box">
            <div class="left">
                <slot name="me"></slot>
            </div>
            <div class="right">
                <slot name="brother"></slot>
            </div>
        </div>
    </template>

    <script src="../lib/Vue/vue.js"></script>
    <script>

    /*具名插槽
	插槽有一个name属性。与匿名插槽相对，加了name属性的匿名插槽就是具名插槽。
	组件通过在template上写v-slot:name来使用具名插槽
	注意 v-slot 只能添加在template标签上
	(只有一种例外情况)。
	例外情况（被废弃的slot=‘name’）
	带slot属性的具名插槽自 2.6.0 起被废弃，vue3.x被完全废弃。只有vue3之前的cli可以使用。
	跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header。*/

        var vm = new Vue({
            el: '#app',
            components: {
                'box': {
                    template: '#box'
                }
            }
        })
    </script>
</body>
</html>